<template>
  <view class="payment-method">
    <!-- 银行卡列表 -->
    <view class="section-card">
      <view class="section-header">
        <text class="title">我的银行卡</text>
        <text class="add-btn" @tap="addBankCard">添加银行卡</text>
      </view>
      <view class="card-list">
        <view 
          class="bank-card"
          v-for="(card, index) in bankCards"
          :key="index"
          :class="card.type"
        >
          <view class="card-info">
            <image :src="card.logo" mode="aspectFit" class="bank-logo" />
            <view class="info">
              <text class="bank-name">{{ card.bankName }}</text>
              <text class="card-type">{{ card.cardType }}</text>
            </view>
          </view>
          <text class="card-number">**** **** **** {{ card.lastFour }}</text>
          <view class="card-actions">
            <text class="default-tag" v-if="card.isDefault">默认</text>
            <view class="action-btns">
              <text 
                class="action-btn"
                v-if="!card.isDefault"
                @tap="setDefault(card)"
              >设为默认</text>
              <text 
                class="action-btn"
                @tap="unbindCard(card)"
              >解除绑定</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 其他支付方式 -->
    <view class="section-card">
      <view class="section-header">
        <text class="title">其他支付方式</text>
      </view>
      <view class="payment-list">
        <view 
          class="payment-item"
          v-for="(payment, index) in paymentMethods"
          :key="index"
          @tap="togglePayment(payment)"
        >
          <view class="payment-info">
            <image :src="payment.icon" mode="aspectFit" class="payment-icon" />
            <view class="info">
              <text class="name">{{ payment.name }}</text>
              <text class="desc">{{ payment.desc }}</text>
            </view>
          </view>
          <switch 
            :checked="payment.enabled"
            color="#67AFAB"
            @change="e => togglePayment(payment, e.detail.value)"
          />
        </view>
      </view>
    </view>
    
    <!-- 温馨提示 -->
    <view class="notice-card">
      <view class="section-title">温馨提示</view>
      <view class="notice-list">
        <view class="notice-item">
          <text class="dot"></text>
          <text class="content">为保障资金安全，请使用本人银行卡</text>
        </view>
        <view class="notice-item">
          <text class="dot"></text>
          <text class="content">银行卡信息已进行加密保护</text>
        </view>
        <view class="notice-item">
          <text class="dot"></text>
          <text class="content">如遇支付问题，请联系客服：+853 2837 1333</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 银行卡列表
const bankCards = ref([
  {
    id: 1,
    bankName: '中国银行(澳门)',
    cardType: '储蓄卡',
    lastFour: '8888',
    type: 'bocm',
    logo: '/static/payment/bocm.png',
    isDefault: true
  },
  {
    id: 2,
    bankName: '工商银行(澳门)',
    cardType: '储蓄卡',
    lastFour: '6666',
    type: 'icbcm',
    logo: '/static/payment/icbcm.png',
    isDefault: false
  }
])

// 其他支付方式
const paymentMethods = ref([
  {
    id: 1,
    name: '支付宝国际版',
    desc: '支持澳门元/港币/人民币支付',
    icon: '/static/payment/alipay.png',
    enabled: true
  },
  {
    id: 2,
    name: 'MPay澳门钱包',
    desc: '澳门本地移动支付工具',
    icon: '/static/payment/mpay.png',
    enabled: true
  },
  {
    id: 3,
    name: 'BOC Pay',
    desc: '中银澳门手机支付',
    icon: '/static/payment/bocpay.png',
    enabled: false
  },
  {
    id: 4,
    name: 'WeChat Pay HK',
    desc: '支持港币/澳门元支付',
    icon: '/static/payment/wechat.png',
    enabled: true
  }
])

// 添加银行卡
const addBankCard = () => {
  uni.navigateTo({
    url: '/pages/my/add-bank-card'
  })
}

// 设为默认卡
const setDefault = (card) => {
  uni.showModal({
    title: '提示',
    content: '确定要将该卡设为默认支付卡吗？',
    success: (res) => {
      if (res.confirm) {
        // 这里调用设置默认API
        bankCards.value.forEach(item => {
          item.isDefault = item.id === card.id
        })
        uni.showToast({
          title: '设置成功',
          icon: 'success'
        })
      }
    }
  })
}

// 解除绑定
const unbindCard = (card) => {
  if (card.isDefault) {
    uni.showToast({
      title: '默认卡不能解绑',
      icon: 'none'
    })
    return
  }
  
  uni.showModal({
    title: '提示',
    content: '确定要解除该银行卡绑定吗？',
    success: (res) => {
      if (res.confirm) {
        // 这里调用解绑API
        const index = bankCards.value.findIndex(item => item.id === card.id)
        if (index > -1) {
          bankCards.value.splice(index, 1)
          uni.showToast({
            title: '解绑成功',
            icon: 'success'
          })
        }
      }
    }
  })
}

// 切换支付方式
const togglePayment = (payment, value) => {
  if (typeof value === 'undefined') {
    value = !payment.enabled
  }
  
  // 这里调用开启/关闭API
  payment.enabled = value
  uni.showToast({
    title: value ? '已开启' : '已关闭',
    icon: 'success'
  })
}
</script>

<style lang="scss">
.payment-method {
  min-height: 100vh;
  background: $bg-color;
  padding: 20rpx;
  
  .section-card {
    background: #fff;
    border-radius: $radius-lg;
    padding: 30rpx;
    margin-bottom: 20rpx;
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      
      .title {
        font-size: 32rpx;
        color: $text-primary;
        font-weight: bold;
      }
      
      .add-btn {
        font-size: 28rpx;
        color: $primary-color;
        
        &:active {
          opacity: 0.8;
        }
      }
    }
    
    .card-list {
      .bank-card {
        background: $primary-gradient;
        border-radius: $radius-lg;
        padding: 30rpx;
        margin-bottom: 20rpx;
        color: #fff;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        &.bocm {
          background: linear-gradient(135deg, #D4237A, #FF6B6B);
        }
        
        &.icbcm {
          background: linear-gradient(135deg, #FF8C00, #FFB74D);
        }
        
        .card-info {
          display: flex;
          align-items: center;
          margin-bottom: 30rpx;
          
          .bank-logo {
            width: 60rpx;
            height: 60rpx;
            margin-right: 16rpx;
          }
          
          .info {
            .bank-name {
              font-size: 32rpx;
              font-weight: bold;
              margin-bottom: 4rpx;
              display: block;
            }
            
            .card-type {
              font-size: 24rpx;
              opacity: 0.9;
            }
          }
        }
        
        .card-number {
          font-size: 36rpx;
          font-family: monospace;
          letter-spacing: 4rpx;
          margin-bottom: 30rpx;
          display: block;
        }
        
        .card-actions {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .default-tag {
            font-size: 24rpx;
            padding: 4rpx 12rpx;
            background: rgba(255,255,255,0.2);
            border-radius: $radius-sm;
          }
          
          .action-btns {
            display: flex;
            gap: 20rpx;
            
            .action-btn {
              font-size: 24rpx;
              padding: 4rpx 12rpx;
              background: rgba(255,255,255,0.2);
              border-radius: $radius-sm;
              
              &:active {
                opacity: 0.8;
              }
            }
          }
        }
      }
    }
    
    .payment-list {
      .payment-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 0;
        border-bottom: 1rpx solid #eee;
        
        &:last-child {
          border-bottom: none;
        }
        
        .payment-info {
          display: flex;
          align-items: center;
          
          .payment-icon {
            width: 80rpx;
            height: 80rpx;
            margin-right: 20rpx;
          }
          
          .info {
            .name {
              font-size: 30rpx;
              color: $text-primary;
              margin-bottom: 4rpx;
              display: block;
            }
            
            .desc {
              font-size: 24rpx;
              color: $text-secondary;
            }
          }
        }
      }
    }
  }
  
  .notice-card {
    background: #fff;
    border-radius: $radius-lg;
    padding: 30rpx;
    
    .section-title {
      font-size: 30rpx;
      color: $text-primary;
      font-weight: bold;
      margin-bottom: 20rpx;
    }
    
    .notice-list {
      .notice-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 16rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .dot {
          width: 12rpx;
          height: 12rpx;
          background: $primary-color;
          border-radius: 50%;
          margin-top: 8rpx;
          margin-right: 12rpx;
          flex-shrink: 0;
        }
        
        .content {
          flex: 1;
          font-size: 26rpx;
          color: $text-regular;
          line-height: 1.6;
        }
      }
    }
  }
}
</style> 